<template>
  <div class="txt-container">
    <div class="txt-content" ref="textContainer">
      <pre>{{ fileContent }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  fileUrl: {
    type: String,
    required: true
  }
});

const fileContent = ref('');
const textContainer = ref(null);

// 加载TXT文件内容
const loadTextContent = async () => {
  try {
    // 尝试使用标准模式
    const response = await fetch(props.fileUrl);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    fileContent.value = await response.text();
  } catch (error) {
    console.error('标准模式加载文本文件失败:', error);
    
    try {
      // 尝试使用no-cors模式
      console.log('尝试使用no-cors模式加载文件');
      const response = await fetch(props.fileUrl, { mode: 'no-cors' });
      fileContent.value = await response.text();
    } catch (nocorsError) {
      console.error('no-cors模式加载文本文件也失败:', nocorsError);
      
      // 如果是CORS错误，设置一个友好的错误信息
      if (error.toString().includes('CORS')) {
        fileContent.value = `无法加载文件内容

由于跨域限制，无法直接加载文件内容。请尝试以下方法：

1. 下载文件后在本地查看
2. 联系管理员配置正确的CORS头

文件路径: ${props.fileUrl}`;
      } else {
        fileContent.value = '文件加载失败，请重试';
      }
    }
  }
};

// 监听文件URL变化
watch(() => props.fileUrl, (newUrl) => {
  if (newUrl) {
    loadTextContent();
  }
}, { immediate: true });

// 组件挂载时加载文件
onMounted(() => {
  if (props.fileUrl) {
    loadTextContent();
  }
});
</script>

<style scoped>
.txt-container {
  height: 100%;
  min-height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: auto;
}

.txt-content {
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

pre {
  margin: 0;
  white-space: pre-wrap;
}

@media (max-width: 768px) {
  .txt-container {
    padding: 8px;
    min-height: 70vh;
  }
  
  .txt-content {
    font-size: 13px;
    padding: 12px;
  }
}
</style> 